<template>
    <Teleport to="body" v-if="modelValue">
        <div class="dialog" @click.stop="closeDialog">
            <div class="win_part">
                <div class="head_part">
                    <div class="close_part" @click="closeDialog"></div>
                </div>
                <div class="content_part">
                    <slot></slot>
                </div>
            </div>
        </div>
    </Teleport>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted} from 'vue'

let props = defineProps({
    modelValue:{
        type:Boolean,
        default:false
    }
})
let emits = defineEmits(['update:modelValue'])
const closeDialog = () =>{
    emits('update:modelValue',false)
}
</script>
<style scoped lang="scss">
.dialog{
    position: absolute;
    height: 100vh;
    width: 100vw;
    z-index: 100;
    background-color: rgba(0,0,0,0.3);
    .win_part{
        position: absolute;
        width: 1075px;
        height: 749px;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        .head_part{
            height: 39px;
            background-color: #15CDB8aa;
            .close_part{
                position: absolute;
                right: 20px;
                top:10px;
                height: 25px;
                width: 25px;
                background-image: url('@/assets/imgs/icon-hom1/close.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
        }
        .content_part{
            height: 710px;
            width: 100%;
            background-color: rgba(0,0,0,0.8)
        }
    }
}
</style>